/**
* Created by wl
* 基金储备库-详情页
*/
<template>
    <div>
        <div class="right">
            <div class="ca-align-right ca-head-fixed">
                <el-button type="primary" @click="goInvestedFunds()" :disabled="!isAuthTurn">转到拟投资基金</el-button>
            </div>
            <csHeader></csHeader>
            <el-tabs type="border-card" class="ca-tabs ca-m-t-15" @tab-click="handleClick" :value="tabIndex">
                <el-tab-pane :disabled="!isAuthTab">
                    <csRedDot slot="label" :label="tabArr[0]" :showDot="dotStateList[0]"></csRedDot>
                </el-tab-pane>
            </el-tabs>
            <csTab></csTab>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from './api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { getDetailRemind, read, isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                tabIndex: 0,
                fundEntity: {}, //头部基本信息
                fundMotherSonList: [], //母基金
                fundUserList: [], //基金经理和基金团队
                industryList: [], //投资方向
                isAuthTurn: isNoAuth('基金储备库-基金详情-一键转拟投资'),
                isAuthTab: isNoAuth('基金储备库-基金详情-查看'),
                tabArr: ['基金详情'],
                dotStateList: [false], // 小红点状态
                activeIndex: 0,
            }
        },
        watch: {
        },
        props: {},
        mounted() {
            let ind = {
                index: this.$route.params.tabIndex.toString()
            }
            this.handleClick(ind)
            // 获取红点
            this.getDotList();
            // 为子组件创建的第三方组件方法
            this.$root.Dot.$on('getDotList', () => {
                this.getDotList();
            })
        },
        beforeRouteEnter(to, from, next) {
            next( vm => {
                // 遍历所有tab 权限
                if (!isNoAuth('基金储备库-' + vm.tabArr[vm.tabIndex] + '-查看')) {
                  let flag = false;
                  for (let i = vm.tabIndex; i < vm.tabArr.length; i++) {
                      if (isNoAuth('基金储备库-' + vm.tabArr[i] + '-查看')) {
                          vm.tabIndex = i.toString();
                          flag = true;
                          break;
                      }
                  }
                  if (!flag) {
                    for (let i = 0; i < vm.tabIndex; i++) {
                        if (isNoAuth('基金储备库-' + vm.tabArr[i] + '-查看')) {
                            vm.tabIndex = i.toString();
                            flag = true;
                            break;
                        }
                    }
                  }
                  if (!flag) {
                      vm.$message({
                          message: '没有此页面的操作权限',
                          type: 'error',
                          center: true
                      });
                      vm.$router.replace({name: 'personal-center', params: {tabIndex: '0', openWindow: false}})
                  }
                }
            })
        },
        methods: {
            // 转拟投资
            goInvestedFunds() {
                this.$confirm('是否确定将此基金转为拟投资基金', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    // 获取详情
                    apiHttp(api.CHECK_HEADERINFO, {fundId: this.$route.params.itemId}).then(ret=> {
                        if (ret.resCode === STATUS_HTTP_SUCCESS) {
                            this.fundEntity = ret.data.fundEntity
                            this.fundEntity.fundState = 0
                            this.fundMotherSonList = ret.data.fundMotherSonList
                            this.fundUserList = ret.data.fundUserList
                            this.industryList = ret.data.industryList;//投资方向
                            let query = {
                                fundEntity: this.fundEntity,
                                fundMotherSonList: this.fundMotherSonList,
                                fundUserList: this.fundUserList,
                                industryList: this.industryList
                            }
                            apiHttp(api.SAVE_HEADERINFO, query).then(res=> {
                                if (res.resCode === STATUS_HTTP_SUCCESS) {
                                    this.$router.push({name: 'pre-investment-funds',params: {itemId: this.$route.params.itemId, turnInvest: true, openWindow: true}})
                                }
                            })
                        }
                    })
                })
            },
            // 设置小红点状态
            async getDotList() {
                const dotList = await getDetailRemind({ dataId: this.$route.params.itemId, dataType: 4 });
                dotList.map(x => {
                    this.dotStateList[x.dataTab] = true;
                });
                this.dotStateList = this.dotStateList.concat([]);
            },
            // 切换tab
            handleClick(val) {
                this.activeIndex = val.index;
                // 去除小红点
                read({ dataId: this.$route.params.itemId, dataTab: val.index, dataType: 4 });
                this.dotStateList[val.index] = false;
                this.dotStateList = this.dotStateList.concat([]);
                // 设置小红点状态 end
            },
        },
        beforeDestroy() {
            // 销毁小红点第三方vue
            this.$root.Dot.$off('getDotList');
        },
        components: {
            csHeader: require('./header/index'), //头部信息
            csTab: require('./tab/index'), //tab
            // csFundInfo: require('./tab/fund-info/index'), //基金详情
            // csManagementAgency: require('./tab/management-agency/index'), //管理机构信息
            // csManagementTeam: require('./tab/management-team/index'), //管理团队
            // csManagementOperation: require('./tab/management-operation/index'), //管理和运行
            // csProjectReserve: require('./tab/project-reserve/index'), //项目储备
            // csInvestmentCase: require('./tab/investment-case/index'), //投资案例
            csRedDot: require('__components/red-dot'), // 小红点
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.use-list-pagination{
    margin: 31px  25%;
}
.ca-right {
    height: 20px;
    width: 100%;
}
.ca-right-5 {
    float: right;
    margin-right: 10px;
}
</style>
